<template>
  <el-container class="wrap">
    <el-header height="50px">
      <el-button icon="el-icon-tickets" @click="handleOpen" />
      <the-header />
    </el-header>
    <el-container class="body-wrap">
      <the-nav :class="{'open': open}" />
      <el-main>
        <ListView></ListView>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import TheHeader from "@/components/TheHeader";
import TheNav from "@/components/TheNav";
import ListView from "@/views/ListView";
import Carousel from "@/components/Carousel";
export default {
  name: "home",
  data() {
    return {
      open: false,
    };
  },
  components: {
    TheHeader,
    TheNav,
    Carousel,
    ListView
  },
  methods: {
    handleOpen() {
      this.open = !this.open;
      console.log(this.open);
    }
  },
  mounted(){
  }
};
</script>

<style scoped lang="scss">
$smallSize: 500px;

@mixin tran-horizontal($percentage, $time) {
  @if $percentage != 0 {
    transform: translateX($percentage);
    -moz-transform: translateX($percentage);
    -webkit-transform: translateX($percentage);
    -o-transform: translateX($percentage);
  }
  transition: transform $time ease;
  -moz-transition: transform $time ease;
  -webkit-transition: transform $time ease;
  -o-transition: transform $time ease;
}
.wrap {
  min-height: 96vh;
  .el-header {
    position: relative;
    background-color: #409eff;
    line-height: 50px;
    .el-button {
      position: absolute;
      left: 10px;
      top: 60%;
      transform: translateY(-60%);
      border: #fff;
      background-color: #fff;
      @media screen and (min-width: $smallSize) {
        display: none;
      }
    }
  }
  .body-wrap {
    position: relative;
    overflow: hidden;
    .el-aside {
      z-index: 999;
      min-width: 200px;
      max-width: 200px;
      height: calc(100vh - 100px);
      background-color: #d3dce6;
      color: #333;
      @include tran-horizontal(0, 0.4s);
      @media screen and (max-width: $smallSize) {
        position: absolute;
        left: -200px;
      }
      &.open {
        @include tran-horizontal(100%, 0.4s);
      }
    }
    .el-main {
      z-index: 1;
      background-color: rgba(155, 155, 155, 0.1);
      color: #333;
      text-align: center;
      padding: 0px;
      .main {
        background-color: #fff;
        min-height: calc(100vh - 200px);
      }
    }
    .el-footer {
      color: #333;
      line-height: 70px;
      text-align: center;
      background-color: #d3dce6;
    }
  }
}

</style>
